<template>
    <el-form class="log_container" :rules="rules" :model="model" ref="model" label-width="80px">
        <h3>云来云往后台管理系统</h3>
        <el-form-item prop="userName">
            <el-input placeholder="用户名" v-model="model.userName"></el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input placeholder="密码" type="password" v-model="model.password"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button @click="login('model')"  :loading="loading" style="width:100%" size="primary">登录</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
import api from '../api/apiConf'
import Cookie from 'js-cookie'
export default {
    data() {
        return {
            loading:false,
            model: {
                userName: "",
                password: ""
            },
            rules: {
                userName: [
                    { required: true, message: "请输入用户名", trigger: "blur" }
                ],
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" }
                ]
            }
        }
    },
    methods: {
        login(formName) {
            this.$refs[formName].validate((vaild) => {
                if (vaild) {
                    this.loading=true;
                    api.login({
                        userName: this.model.userName,
                        password: this.model.password
                    }).then(response=>{
                         if(response.data.status==200){
                             Cookie.set("token",response.data.result.token);
                             this.$router.push('/');
                         }else{
                             this.$message({
                                 type:"error",
                                 message:response.data.message,
                                 duration:1000
                             });
                             this.loading=false;
                         }
                    });
                }
            });
        }
    }
}
</script>

<style>
.log_container {
    margin: 200px auto;
    width: 380px;
    padding: 20px 100px 20px 20px;
    background: #ffffff;
    box-shadow: 0 0 25px #eaeaea;
}

.log_container h3 {
    text-align: center;
    margin-bottom: 35px;
    margin-left: 100px;
}
</style>
